<script setup>

import {
  Edit,
  Avatar
} from '@element-plus/icons-vue'

import { ref,onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import {useRouter} from "vue-router";
import { ElDialog, ElMessage } from 'element-plus';
import {getProjectAndUser} from '@/api/admin.js'


//跳转到参赛人员信息页面
const router = useRouter();

const gotoSport = (row) => {
  const path = row.type == 0 ? '/manage/gerenShow' : '/manage/teamShow';
  router.push({
    path: path,
    query: { projectId: row.projectId }
  });
};

//获取赛事项目
const proList = ref([])
const list = async() => {
  try {
    const resp = await getProjectAndUser();
    proList.value = resp.data
    console.log(proList.value)
  } catch (error){
    ElMessage.error("获取数据失败")
  }
}

const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

onMounted(() => {
  list()
});
</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>赛事信息</span>
      </div>
    </template>

    <!-- 赛事列表 -->
    <el-table :data="proList" style="width: 100%">
      
      <!-- 项目编号 -->
      <el-table-column label="项目编号" prop="number"></el-table-column>
      
      <!-- 项目名称 -->
      <el-table-column label="项目名称" prop="name"></el-table-column>
      
      <!-- 赛事类型 (0 for 个人, 1 for 团体) -->
      <el-table-column label="赛事类型">
        <template #default="scope">
          {{ scope.row.type == 0 ? '个人' : '团体' }}
        </template>
      </el-table-column>
      
      <!-- 男子/女子 (0 for 女子, 1 for 男子) -->
      <el-table-column label="男子/女子">
        <template #default="scope">
          {{ scope.row.gtype == 0 ? '女子' : '男子' }}
        </template>
      </el-table-column>
      
      <!-- 举行时间 -->
      <el-table-column label="举行时间">
        <template #default="scope">
          {{ formatDate(scope.row.eventTime) }}
        </template>
      </el-table-column>
      
      <!-- 比赛地点 -->
      <el-table-column label="地点" prop="place"></el-table-column>
      
      <!-- 操作列 -->
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Avatar" circle plain type="primary" @click="gotoSport(row)"></el-button>
        </template>
      </el-table-column>
      
      <!-- 空状态 -->
      <template #empty>
        <el-empty description="暂无赛事信息" />
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination 
      v-model:current-page="pageNum" 
      v-model:page-size="pageSize" 
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next" 
      background 
      :total="total" 
      @size-change="onSizeChange"
      @current-change="onCurrentChange" 
      style="margin-top: 20px; justify-content: flex-end" 
    />
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* 定义不同状态的颜色样式 */
  // .status-active {
  //   color: rgb(92, 243, 92);
  //   /* 比赛举行中 */
  // }

  // .status-inactive {
  //   color: rgb(247, 193, 75);
  //   /* 比赛未开始 */
  // }

  // .status-reject {
  //   color: rgb(247, 87, 75);
  //   /* 比赛已结束 */
  // }

}
</style>